<template>

  <div id="ry">

    <el-container>
      <el-aside width="250px">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>
        <el-tree style="height:400px;"
            class="filter-tree"
            :data="this.data"
            node-key="id"
            :highlight-current="true"
            default-expand-all
            :indent="10"
            :expand-on-click-node="false"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            ref="tree">
          <template #default="{ node, data }">
            <span class="custom-tree-node"
                 style="width: 100%;text-align: left">
            <el-dropdown :hide-timeout="0"
                         trigger="contextmenu"
                         :tabindex="9999" :show-timeout="0"
                         @command="(e)=>{handleCommand(e,data)}" >
              <span class="el-dropdown-link">
                {{ node.label }}
              </span>
              <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="add">新增</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
              </template>
            </el-dropdown>
            </span>
          </template>

        </el-tree>


        <el-dialog v-model="this.groupDiag.dialogFormVisible" width="300px">
          <el-form :model="groupDiag">
            <el-form-item label="分组名称">
              <el-input v-model="groupDiag.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="this.groupDiag.dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="this.saveGroup">确 定</el-button>
          </div>
        </el-dialog>

      </el-aside>
      <el-main>
        <ProcessList :group-id="this.currentGroupId"/>
      </el-main>
    </el-container>

  </div>

</template>

<script>
import {post} from '../../config/Request.js'
import ProcessList from './ProcessList.vue'
import apis from "@/request/apis.js";

export default {
  name: "ProcessManager",
  components: {
    ProcessList
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: '',
      data: [],
      groupDiag: {
        dialogFormVisible: false,
        name: '',
        action: '',
        parentId: null,
        id: null
      },
      input: '',
      currentGroupId: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {
    // this.initG6();
    this.queryGroupTree();
  },
  methods: {
    handleNodeClick(data) {
      this.currentGroupId = data.id;
    },
    handleCommand(action, data) {
      if (action == "add") {
        this.groupDiag.dialogFormVisible = true;
        this.groupDiag.name = "";
        this.groupDiag.id = null;
        this.groupDiag.parentId = data.id;
        this.groupDiag.action = action;
      } else if (action == "delete") {
        this.deleteGroup(data.id);
      } else if (action == "edit") {
        this.groupDiag.dialogFormVisible = true;
        this.groupDiag.parentId = null;
        this.groupDiag.action = action;
        this.queryGroupById(data.id);
      }

      // this.mouseleave(data)
    },
    async queryGroupById(id) {
      const data = await apis.post("/square-lake/group/get_by_id", {id: id});
      if (!data) {
        return;
      }
      this.groupDiag.name = data.name;
      this.groupDiag.id = data.id;
    },
    async deleteGroup(id) {
      await apis.post("/square-lake/group/delete_by_id", {id: id});
      await this.queryGroupTree();
    },
    async saveGroup() {
      if (this.groupDiag.name == null) {
        return;
      }
      if (this.groupDiag.action == 'add') {
        await apis.post("/square-lake/group/add", {parentId: this.groupDiag.parentId, name: this.groupDiag.name});
        await this.queryGroupTree();
      } else if (this.groupDiag.action == "edit") {
        await apis.post("/square-lake/group/update_by_id", {id: this.groupDiag.id, name: this.groupDiag.name});
      }
      this.groupDiag.id = null;
      this.groupDiag.parentId = null;
      this.groupDiag.name = "";
      this.groupDiag.dialogFormVisible = false;
      await this.queryGroupTree();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    async queryGroupTree() {
      const data = await apis.post("/square-lake/group/tree",{});
      this.data = data;
    },

  }
}
</script>

<style scoped>

</style>